<template>
  <div class="special">
    <div class="name">
      <span># 特殊话题</span>
      <van-button icon="plus" type="primary" color="#D74F81" round size="small">关注</van-button>
    </div>
    <div class="topic">
      题主：<van-image
        width="16px"
        height="16px"
        fit="cover"
        round
        src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg"
      />
      &nbsp;名称
    </div>
    <div class="intro">
      简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介
      简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介
    </div>
    <div class="tip">
      <van-image
        width="24px"
        height="24px"
        fit="cover"
        round
        src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg"
      />&nbsp;
      用户13142B&nbsp;1小时前&nbsp;喜欢了篇话题内容❤
    </div>
  </div>
</template>

<script>
export default {
  name:'SpecialTopic'
}
</script>

<style scoped lang='scss'>
@import '../../style/mixin.scss';
.special {
  font-family: 'PingFang SC';
  font-style: normal;
  .name {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
    @include flex-box(space-between);
    ::v-deep .van-button {
      height: 24px;
      @include flex-box('center', center);
      font-size: 12px;
    }
    ::v-deep .van-icon{
      font-size: 12px;
    }
  }
  .topic {
    color: #e7e8ea;
    @include flex-box('flex-start', center);
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    padding: 8px 0px;
  }
  .intro {
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #c8c9cc;
    @include ellipseClamp(2);
  }
  .tip {
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    @include flex-box('flex-start', center);
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #c8c9cc;
    margin-top: 16px;
    padding-left: 8px;
  }
}
</style>